<%@ page contentType="text/html;charset=UTF-8" %>
	<div class="form-inline">	
		<label>Select a team</label>	 		
		<select id="team" onchange="changeTeam(this.value,'${g.createLink(controller: 'Dashboard', action: 'getSprintAndTeamMember')}')">
				<option value="" selected="selected">--Select a Team--</option>
				<g:each in="${teamList}" var="teams">
					<option value="${teams.id}">
						${teams.teamName}
					</option>
				</g:each>
		</select>
		<label>Select a sprint</label>	 		
		<select id="sprint" onchange="findIssueBySprint(this.value,'${g.createLink(controller: 'Issue', action: 'jsonFindIssueBySprint')}')"></select>
		<span style="float:right;margin-bottom:10px;"><a href="#" data-toggle="modal" data-target="#formSetting"><img alt="setting" src="../images/skin/setting.png"> Setting </a></span>
		<span style="float:right;margin-bottom:10px;margin-right:30px;" id="add-issue"><a href="#" data-toggle="modal" data-target="#formIssue"><img alt="setting" src="../images/skin/add-icon.png"> Add new issue </a></span>
		
					 	
	</div>	
	<div id="kanban" style="margin-top: 30px;"></div>
	<div class="dropdown" id="assign-menu">
		  <ul class="dropdown-menu dropdown" role="menu" id="assign-menu" aria-labelledby="dLabel">
		  </ul>
	</div>
<script type="text/javascript">
	$(function(){
		$('.content').css({'width':'100%'});
		$('#kanban').on('click','.dropdown-menu',function(){
			return false;
		});
		//Handle select event - set value for Select sprint when change Select team 
		$('#team').change(function(){
			if($(this).val()){
				sessionStorage.teamid= $(this).val();
				sessionStorage.sprintid = $('#sprint').val();								
			}else{
				$('.board').fadeOut(200);
				sessionStorage.clear();
			}
		});
		$('#sprint').change(function(){
				sessionStorage.sprintid = $(this).val();
				loadKanban($('#team').val(),$(this).val());
				findIssueBySprint($(this).val(),"${g.createLink(controller: 'Issue', action: 'jsonFindIssueBySprint')}");
		});	

		//Handle click event on avatar in header of sticker
		$('#kanban').on('click','.sticker .sticker-header .avatar', function(e) {
			e.stopPropagation();
			$('#context-menu').removeClass('open');
			var avatar = $(this);
			var issueID = $(this).parents('.sticker').attr('id');
			var menu = $('#assign-menu');
			var position = $(this).offset();

			//Remove click event on assign-menu
			menu.find('li a').off("click");

			//Add click event to assign-menu
			menu.find('li a').click(function(){
				var memberID = $(this).attr('id');
			      $.get('${g.createLink(controller: 'Dashboard', action: 'assignMemberForIssue')}',{memberID: memberID, issueID: issueID},
					      function(data){
							avatar.attr('src','../avatarImages/'+data.avatar);
				   		})
				  $('#assign-menu').find('.dropdown-menu').first().stop(true, true).slideUp(100);
				  return false;			      
			})
			
			menu.find('.dropdown-menu').first().stop(true, true).slideUp();		

			//Set position and show assign-menu when click on avatar
			menu.offset({ top: position.top+30, left: position.left });
			menu.find('.dropdown-menu').first().stop(true, true).slideDown(200);
		})
		
		//Close assign-menu when click out web page
		$(document).on('click', function () {
			$('#assign-menu').find('.dropdown-menu').first().stop(true, true).slideUp(200);
	    });		   
//********************************************************************		

		//Fixed nav when scroll x		
		var left = $('.navbar-inner').offset().left - parseFloat($('.navbar-inner').css('margin-left').replace('/auto/', 0));
		$(window).scroll(function(){
			var x = $(window).scrollLeft();
			var y = $(window).scrollTop();
			if(x > left){}
		})
	});
</script>
